<template>
  <div class="son">
    <div>儿子</div>
    <!-- 子收父:通过‘defineProps’接收父组件的自定义属性 -->
    <div>money:{{ SonMoney }}</div>
    <div>doubleMoney:{{ doubleMoney }}</div>
    <div>{{ title }}</div>

    <!-- 子传父: 通过‘defineEmits’获取父的自定义事件(getSonMsg),
                再通过单击事件@click="$emit('自定义事件',子要传的属性名) -->
    <div>我女朋友:{{ girlFriend }}</div>
    <button @click="$emit('getSonMsg', girlFriend)">通知父</button>
  </div>
</template>
  
<script setup>
import { ref, computed } from "vue";
const props = defineProps(["SonMoney", "title"]);
defineEmits(["getSonMsg"]);
const girlFriend = ref("小美");

const doubleMoney = computed(() => {
  return props.SonMoney * 2;
});
</script>
  
  <style  scoped>
.son {
  width: 180px;
  height: 180px;
  border: 2px solid skyblue;
  margin: 50px auto;
}
</style>